<template>
    <div class="shoppin-box">
        <div class="shoppin-top">
            <div class="shoppin-top2">共{{$store.state.list.length}}件宝贝</div>
        </div>
        <ul>
            <li v-for="(list,index) in $store.state.list" :key="list.id" :class="{red: !isshow,blue: isshow}">
                <div class="shop-bar" >
                    <div class="shop-img">
                        <img :src="list.img" />
                    </div>
                    <div class="shop-inf">
                        <div class="shop-inf-box">{{list.shuo}}</div>
                        <div class="shop-pri-box">
                            <div class="shop-pri">{{list.ppp}}</div>
                            
                            <div class="shop-pri">
                                {{list.presentPrice}}
                            </div>
                            <Addnums></Addnums>
                        </div>
                        <div class="rmbtn" @click="remove(index)">
                            <van-icon name="cross" />
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="shoppin-bot">
            <div class="all-btn" @click="cheeck">
                <div
                    @click="isshow=!isshow;isshow2=!isshow2;"
                    :class="{allbtn:isshow2,allbtns:!isshow2}"
                ></div>
                <div @click="cheeck">全选</div>
            </div>
            <div class="shoppin-all">
                <div>合计：￥{{addP}}</div>
                <div>结算</div>
            </div>
        </div>
    </div>
</template>

<script>
import  Addnums from '../common/Addnums'
export default {
    name: "Shop",
    components:{
        Addnums
    },
    
    // computed: {
    //     goodsnum: function() {
    //         return this.listData.length;
    //     }
    // },
    computed:{
        // 失败的代码
       addP(){
           return this.$store.state.list.filter(itme =>{
               return itme.chenk
           }).reduce((preValue,itme) =>{
               return  parseInt(preValue)+ parseInt(itme.ppp)

           },0)

       }

           },
            
          
    //     }

    // },
    data() {
        return {
           list1 : this.$store.state.list,
           check:this.$store.state.list.chenk,
            isshow: true,
            isshow2: true,
            addnum: 1
        };
    },
    // created(){
    //     let rue1 = this.$store.state.list
    //     for(let i = 0 ; i<rue1.length;i++){
    //             let rue2 = null
    //             rue2 +=  parseInt(rue[i])

    //          return  rue2
    //          console.log(rue2)

    //        }
               

    // },
    methods: {
        adds() {
            this.addnum++;
        },
        reds() {
            if (this.addnum > 1) {
                this.addnum--;
            }
        },
        remove(index) {
            this.list1.splice(index, 1);
        },
        cheeck(){
            this.check = !this.check

        }
    }
};
</script>

<style scoped>
    .all-btn div:nth-child(3) {
        color: #a1a1a1;
        margin-left: 30px;
    }
    .rmbtn {
        height: 16px;
        text-align: right;
        padding-right: 10px;
        margin-top: 15px;
    }
    .allbtns {
        background-color: #ff3c00;
    }
    .shoppin-box {
        background-color: #ffffff;
    }
    .shoppin-top {
        height: 100px;
        background-color: #e9e9e9;
    }
    .shoppin-top2 {
        font-size: 14px;
        color: #a1a1a1;
        line-height: 50px;
        margin: 0 10px;
        padding-top: 50px;
        text-align: center;
        font-size: 18px;
    }
    .red {
        height: 200px;
        border: #ff3c00 solid 1px;
        border-radius: 10px;
        margin: 10px;
    }
    .blue {
        height: 200px;
        border: #a1a1a1 solid 1px;
        border-radius: 10px;
        margin: 10px;
    }
    .shop-bar {
        height: 200px;
        display: flex;
        justify-content: space-between;
    }
    .shop-img {
        width: 40vw;
        max-height: 200px;
        overflow: hidden;
        margin-left: 10px;
        margin-top: 10px;
        border-radius: 5px;
    }
    .shop-img img {
        width: 40vw;
    }
    .shop-inf {
        width: 45vw;
    }
    .shop-inf-box {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 18px;
        line-height: 30px;
        height: 90px;
        width: 150px;
        margin-top: 10px;
    }
    .shop-pri-box {
        display: flex;
        height: 50px;
        margin-top: 10px;
    }
    .shop-pri {
        font-size: 18px;
        line-height: 30px;
        margin: 10px 0;
        width: 100px;
    }
    .shoppin-bot {
        position: fixed;
        bottom: 49px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 50px;
        background-color: #f5f5f5f5;
        border-top: #a1a1a1 solid 1px;
        border-bottom: #a1a1a1 solid 1px;
    }
    .all-btn {
        display: flex;
        margin: 0 10px;
    }
    .all-btn div:nth-child(1) {
        height:20px;
        width: 20px;
        margin: 14px 10px;
        margin-right: 5px;
        border: #000000 solid 1px;
        border-radius: 50%;
    }
    .all-btn div {
        line-height: 50px;
    }
    .shoppin-all {
        display: flex;
        height: 50px;
    }
    .shoppin-all div:nth-child(1) {
        height: 50px;
        line-height: 50px;       
    }
    .shoppin-all div:nth-child(2) {
        margin:10px;
        line-height: 30px;
        padding: 0 10px;
        border-radius: 5px;
        background: linear-gradient(90deg,#F5962E,#F57C2E,#F56E2E,#F55D2E);
        color: #e9e9e9;
    }
    .active{
    background-color: rgb(207, 67, 67);
}
</style>